<template>
  <div class="hospital_cell">
    <!-- 医院头像 开始 -->
    <div class="avatar">
      <nuxt-link :to="`/hospital/${info.id}`">
        <li-image :src="$getLogo(info.surroundingsPics)" class="img" v-if="info.surroundingsPics" />
        <img src="@/assets/images/avatar/hospital_default.png" class="img" alt="" v-else>
      </nuxt-link>
    </div>
    <!-- 医院头像 end -->

    <!-- 医院信息 开始 -->
    <div class="hospital_info">
      <div class="hospital_name">
        <nuxt-link :to="`/hospital/${info.id}`">{{ info.name }}</nuxt-link>
      </div>
      <div class="labels_list" v-if="info.featuredLabels && info.featuredLabels.length">
        <div class="label" :class="getClassName(index)" v-for="(item, index) in info.featuredLabels || []"
          :key="`label_${index}`">
          {{ item }}
        </div>
        <!-- <div class="label">医院定点</div>
                <div class="label blue">连锁品牌</div>
                <div class="label dark_blue">5年老店</div> -->
      </div>
      <div class="score_box">
        <div class="score">
          <!-- <el-rate v-model="info.initScore" class="li_rate" disabled allow-half></el-rate> -->
          <li-rate v-model="info.initScore" disabled></li-rate>
        </div>
        <div class="review">{{ info.commentCnt }}条评价</div>
      </div>
      <div class="time_box">营业时间: {{ info.businessTime || "--" }}</div>
      <div class="address">
        所在位置:{{ info.province }}{{ info.city }}{{ info.district
        }}{{ info.address }}
      </div>
    </div>
    <!-- 医院信息 end -->

    <!-- 预约信息 开始 -->
    <div class="book">
      <span class="num">{{ info.initAppointmentCnt }}</span>
      <span>近期预约人数</span>
    </div>
    <!-- 预约信息 end -->
  </div>
</template>
<script>
import { Rate } from "element-ui";
export default {
  name: "ListHospital",
  props: {
    info: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  components: {
    [Rate.name]: Rate,
  },
  data() {
    return {};
  },
  methods: {
    // 查看详情
    lookDetail() {
      let o = this.info;
      let query = this.$route.query;
      let params = {};
      params.id = o.id;
      this.$router.push({
        path: "/hospital/detail",
        query: { ...params },
      });
    },

    // 动态获取className
    getClassName(index) {
      if (index % 3 == 0) {
        return "";
      }
      if (index % 3 == 1) {
        return "blue";
      }
      if (index % 3 == 2) {
        return "dark_blue";
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "./list.less";
</style>